<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>
		<block v-if="list.length>0">
			<view class="pre" v-for="(ite,idx) in list" :key="idx">
				<text>{{ite.nyr}}</text>
				<view class="item" v-for="(item,index) in ite.list" :key="index" @tap="toTurn(item)">
					<view>页面名称：{{item.pvName}}</view>
					<view>访问时间：{{item.createDate}}</view>
					<view>访问时长：{{item.pvTime}}s</view>
				</view>
			</view>
		</block>
		<block v-else>
			<NoData/>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h:uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				title:'浏览记录',
				resList:[],
				list:[],
				page:1,
				limit:10,
				finished:false
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if(this.finished) return
			this.getList();
		},
		methods: {
			getList(){
				this.$api.get('/api/mdmbs/page',{
					page:this.page,
					limit:this.limit,
					openId:JSON.parse(uni.getStorageSync('userInfo')).openId,
					order:'desc',
					orderField:'CREATE_DATE'
				}).then(res=>{
					if(res.data.code===0){
						this.page++;
						let { list, total } = res.data.data;
						if (this.list.length + list.length > total || list.length == 0) return this.finished = true;
						this.resList = [...this.resList, ...list];
						this.resList.sort((a,b)=>{
							return Date.parse(b.createDate)-Date.parse(a.createDate)
						})
						this.resList = this.resList.filter(l=>l.pvName);
						
						let nyList = [];
						this.resList.forEach(d=>{
							let ny = new Date(d.createDate).Format('yyyy年MM月dd日');
							if(!nyList.includes(ny)) nyList.push(ny);
						})
						this.list = [];
						nyList.forEach(l=>{
							this.list.push({
								nyr:this.dealDate(l),
								list:this.resList.filter(d=>new Date(d.createDate).Format('yyyy年MM月dd日')==l)
							});
						})
					}else this.$showModal(res.data.msg);
				})
			},
			dealDate(date){
				let str = date;
				let zt = new Date(new Date().setDate(new Date().getDate() -1)).Format('yyyy年MM月dd日');
				if(new Date().Format('yyyy年MM月dd日')==date) str = '今天'
				else if(zt==date) str = '昨天'
				return str
			},
			toTurn(item){
				let t = { url:'/'+item.pvPath };
				if(item.pvQuery!=""){
					let opt = JSON.parse(item.pvQuery);
					if (JSON.stringify(opt) != '{}') {
						let i = 0;
						for (let o in opt) {
							t.url += (i == 0 ? '?' : '&') + o + '=' + opt[o];
							i++;
						}
					}
				} 
				uni.navigateTo(t);
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		width: 100%;
		background: #efefef;
		padding-bottom: 40rpx;
		
		.pre{
			padding-top: 30rpx;
			&>text{
				font-size: 32rpx;
				color: #111111;
				font-weight: 600;
				padding-left: 32rpx;
			}
			
			.item{
				width: calc(100% - 48rpx);
				padding: 30rpx 24rpx;
				box-sizing: border-box;
				border-radius: 24rpx;
				background: #fff;
				margin: 20rpx 24rpx 0;
				box-shadow: inset 0rpx -2rpx 0rpx 0rpx #EDEDED;
				&>view{
					font-size: 28rpx;
					color: #999;
					margin-top: 20rpx;
					&:first-child{
						margin-top: 0;
						font-size: 32rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>